<template>
  <div>
    <el-input v-model="shiftDetail.shiftTitle" :disabled="true">
      <template slot="prepend">单据标题</template>
    </el-input>
    <div style="height: 7px"></div>
    <div><span v-html="shiftDetail.shiftDesc"/></div>

    <el-table v-if="shiftDetail.shiftContainers && shiftDetail.shiftContainers.length > 0" id="containerTable"
              v-loading="loading" :data="shiftDetail.shiftContainers" max-height="300" size="small" title="关联容器"
    >
      <el-table-column align="center" label="关联容器名称" prop="containerName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="转移前位置" prop="oldContainerLocation"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="转移后位置" prop="newContainerLocation"/>
    </el-table>
    <el-table v-if="shiftDetail.shiftSamples && shiftDetail.shiftSamples.length > 0" id="sampleTable"
              v-loading="loading" :data="shiftDetail.shiftSamples" max-height="300" size="small" title="关联样本"
    >
      <el-table-column align="center" label="关联样本复份编号" min-width="100" prop="sampBackupCode"/>
      <el-table-column align="center" label="样本源名称" prop="sampSourceName"/>
      <el-table-column align="center" label="样本源类型" prop="sampSourceTypeName"/>
      <el-table-column align="center" label="样本类型" prop="sampTypeName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="转移前位置" prop="oldSampLocation"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="转移后位置" prop="newSampLocation"/>
    </el-table>
  </div>
</template>

<script>

import { getShift } from '@/api/activiti/shift'

export default {
  name: 'ShiftDetail',
  props: {
    shiftId: {
      type: String,
      default: undefined
    }
  },
  data() {
    return {
      // 单据详情
      shiftDetail: {},
      // 遮罩层
      loading: true
    }
  },
  created() {
    this.getShiftDetail(this.shiftId)
  },
  methods: {
    getShiftDetail(shiftId) {
      this.loading = true
      getShift(shiftId).then(response => {
        this.shiftDetail = response.data
        this.loading = false
      })
    },
    // 打印
    print() {
      let code = this.shiftDetail.shiftId.substring(this.shiftDetail.shiftId.lastIndexOf('-') + 1)
      let tableId
      if (this.shiftDetail.shiftContainers) {
        tableId = 'containerTable'
      } else if (this.shiftDetail.shiftSamples) {
        tableId = 'sampleTable'
      }
      let content = '<div><span>单据编号：' + code + '</span><span style=\'padding-left: 30px\'>单据标题：' + this.shiftDetail.shiftTitle
        + '</span><span style=\'padding-left: 30px\'>创建人：' + this.shiftDetail.createName
        + '</span><span style=\'padding-left: 30px\'>提交时间：' + this.shiftDetail.createTime + '</span></div>'
        + document.getElementById(tableId).innerHTML
      let strBodyStyle = '<style>table, table tr, table th, table td { text-align: center; border: 1 solid #000000; border-collapse:collapse } table td { padding: 3px 0 } </style>'
      let strFormHtml = strBodyStyle + '<body>' + content + '</body>'
      this.$lodop.commonPrint(this.shiftDetail.shiftTitle, strFormHtml, 0, 'A4')
    }
  },
  watch: {
    shiftId(newValue, oldValue) {
      this.getShiftDetail(newValue)
    }
  }
}
</script>

<style scoped>
.el-input /deep/ .el-input__inner {
  color: #555555 !important;
  cursor: pointer;
}
</style>
